<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>2048</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <header>
        <h1>挑战2048</h1>
        <button id="reset" onclick="game.resetGame()">New Game</button>
        <p>Score: <span id="score">0</span></p>
    </header>

    <div id="container">
        <div class="cell" id="cell_0_0"></div>
        <div class="cell" id="cell_0_1"></div>
        <div class="cell" id="cell_0_2"></div>
        <div class="cell" id="cell_0_3"></div>
        
        <div class="cell" id="cell_1_0"></div>
        <div class="cell" id="cell_1_1"></div>
        <div class="cell" id="cell_1_2"></div>
        <div class="cell" id="cell_1_3"></div>
        
        <div class="cell" id="cell_2_0"></div>
        <div class="cell" id="cell_2_1"></div>
        <div class="cell" id="cell_2_2"></div>
        <div class="cell" id="cell_2_3"></div>
        
        <div class="cell" id="cell_3_0"></div>
        <div class="cell" id="cell_3_1"></div>
        <div class="cell" id="cell_3_2"></div>
        <div class="cell" id="cell_3_3"></div>
        
    </div>
    
</body>
<script src="./main.js"></script>
<script>

    // 适配
    let container = document.querySelector("#container");
    let width = document.body.clientWidth - 40;
    if(width < 700){
        // 需要适配
        container.style.width = width + "px";
        container.style.height = width + "px";
    }

    // START
    let game = new Game();
    window.onload = function(){
        game.resetGame();
    };
</script>
</html>